<template>
  <el-dialog
    v-if="openDialog"
    :title="title"
    v-model="openDialog"
    width="50%"
    @close="onClose"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      ref="formRefs"
      :model="form"
      :rules="rules"
      style="margin-top: 10px"
    >
      <el-form-item label="组件别名:" prop="comName">
        <el-input
          style="width: 240px"
          v-model="form.comName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-table
        class="moreForm"
        header-row-class-name="more-header"
        cell-class-name="more-cell"
        :data="form.getTransformation"
        :key="tableKey"
        style="width: 100%"
      >
        <el-table-column prop="fieldName" label="原字段" align="center">
          <template #default="scope">
            <el-form-item
              :prop="'getTransformation.' + scope.$index + '.fieldName'"
              :rules="rules.fieldName"
            >
              <el-select
                style="width: 85%"
                v-model="scope.row.fieldName"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in fieldNameList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click="fieldNameChange(scope.row), item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="calculator" width="120" align="center">
          <template #default="scope">
            <el-form-item
              :prop="'getTransformation.' + scope.$index + '.calculator'"
              :rules="rules.calculator"
            >
              <el-select
                style="width: 100%"
                v-model="scope.row.calculator"
                placeholder="请选择"
                popper-class="map-select"
              >
                <el-option
                  v-for="item in selectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="fieldValue" label="操作值" align="center">
          <template #default="scope">
            <el-form-item
              :prop="'getTransformation.' + scope.$index + '.fieldValue'"
              :rules="rules.fieldValue"
            >
              <el-input
                v-model="scope.row.fieldValue"
                placeholder="请输入"
                style="width: 240px"
              >
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="action" width="50" align="center">
          <template #default="scope">
            <i class="el-icon-minus" @click="deleteRow(scope.$index)"></i>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <el-button @click="addList">+ 添加参数</el-button>
    <p class="directions">说明：转换组件可对数据进行转换处理，用来改变字段值</p>
    <template #footer class="dialog-footer">
      <el-button @click="onClose">取 消</el-button>
      <el-button type="primary" @click="isOk">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup name="mapSystem">
import { toRefs, watch, ref } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  open: {
    type: Boolean,
    default: false,
  },
});
const { data, open } = toRefs(props);
let title = ref('');
let openDialog = ref(false);
let tableKey = ref(false);
const formRefs = ref(null);
const selectData = ref([
  {
    value: 'PLUS',
    label: '+',
  },
  {
    value: 'REDUCE',
    label: '-',
  },
  {
    value: 'MULTIPLY',
    label: '×',
  },
  {
    value: 'DIVIDE_BY',
    label: '÷',
  },
]);
const fieldNameList = ref([
  {
    label: '数源系统应用id',
    value: 'appId',
  },
  {
    label: '事件分级',
    value: 'level',
  },
  {
    label: '事件类型',
    value: 'type',
  },
  {
    label: '事件源id',
    value: 'externalId',
  },
  {
    label: '事件标题',
    value: 'subject',
  },
  {
    label: '发生地址',
    value: 'location',
  },
  {
    label: '所属街镇',
    value: 'street',
  },
  {
    label: '事件内容',
    value: 'content',
  },
  {
    label: '事件来源',
    value: 'occurSource',
  },
  {
    label: '事件发生时间',
    value: 'occurTime',
  },
]);
const mapSystem = reactive({
  form: {},
  rules: {
    fieldName: {
      required: true,
      message: '请输入原字段',
      tirgger: 'blur',
    },
    fieldValue: {
      required: true,
      message: '请输入新字段',
      tirgger: 'blur',
    },
    calculator: {
      required: true,
      message: '请选择',
      tirgger: 'change',
    },
  },
});
let { form, rules } = toRefs(mapSystem);
const emit = defineEmits(['onClose', 'getData']);

watch(
  data,
  (val) => {
    title.value = val.comName ? val.comName : val.comType;
  },
  { deep: true, immediate: true },
);
watch(open, (val) => {
  if (val) {
    form.value = JSON.parse(JSON.stringify(data.value));
    let comName = form.value.comName ? form.value.comName : form.value.comType;
    form.value.comName = comName;
    if (!data.value.getTransformation) {
      form.value.getTransformation = [
        {
          fieldName: '',
          fieldValue: '',
          calculator: '',
        },
      ];
    }
  }
  openDialog.value = val;
});

const fieldNameChange = (row, value) => {
  row.fieldValue = '';
};
const deleteRow = (index) => {
  if (form.value.getTransformation.length > 1) {
    form.value.getTransformation.splice(index, 1);
  } else {
    form.value.getTransformation = [
      {
        fieldName: '',
        fieldValue: '',
        calculator: '',
      },
    ];
  }
  tableKey.value = !tableKey.value;
};
const addList = () => {
  formRefs.value.validate((valid) => {
    if (valid) {
      form.value.getTransformation.push({
        fieldName: '',
        fieldValue: '',
        calculator: '',
      });
    }
  });
};
const onClose = () => {
  emit('onClose');
};
const isOk = () => {
  formRefs.value.validate((valid) => {
    if (valid) {
      form.value.comState = 1;
      emit('onClose');
      emit('getData', { ...form.value });
    }
  });
};
</script>

<style lang="scss" scoped>
::v-deep {
  .moreForm {
    margin-bottom: 10px;
  }
  .el-form-item {
    margin-bottom: 0 !important;
  }
  .el-dialog__body {
    padding: 10px 20px;
  }
  .more-header {
    & > th {
      background: #fff;
      border-bottom: none !important;
    }
  }
  .more-cell {
    border-bottom: none !important;
  }
  .el-table::before {
    height: 0px;
  }
  .el-icon-minus:hover {
    color: #5cb6ff;
  }
  .map-select {
    .el-select-dropdown__item {
      background: red !important;
    }
  }
}
</style>
